<template>
    <div class="add-store">
        <!-- 导航栏 -->
        <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "网商银行列表", "url": "/internet-bank-list"},{"name": "添加网商银行配置", "url": "/addBankSet"}]'></tz-breadcrumb>
        <div style="margin: 20px;"></div>
        <el-card class="box-card" v-show="showDetail == true">
          <el-form :inline="true" :model="formInline" class="form text-center" label-position="left" label-width="120px" >
          <div class="text item">
            <div class="text-left updataOptions" ><el-button @click="updateBtn" type="success">刷新同步信息</el-button></div>
            <el-tabs value="casebaseinfo" class="mt10">
            <el-tab-pane label="基本信息" name="casebaseinfo">
                    <div class="formLineBorder" v-show = "merchartStatusShow == true">
                      <el-form-item label="商户状态" class="form-item">
                          <el-switch v-model="merchantStatus"
                            active-value="Y"
                            inactive-value="N"
                            active-color="#409EFF" 
                            inactive-color="#ff4949"
                            disabled
                            >
                          </el-switch>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <span class="starFill" >*</span>
                      <el-form-item label="商户号" class="form-item">
                        <el-input class="bigerInput" v-model="formInline.merchant_id" placeholder="请输入您的商户号" disabled></el-input><span style="margin-left:10px">{{formInline.merchant_id}}</span>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="商户名称" class="form-item">
                        <el-input v-model="formInline.MerchantName" placeholder="请输入您的商户名称" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="商户简称" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.Alias" placeholder="请输入您的商户简称" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="商户类型" class="form-item">
                        <el-select v-model="formInline.MerchantType" placeholder="请选择 商户类型"  disabled>
                          <el-option v-for="item in storetypelist" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"  > </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder"  v-show="BussAuthNumShow == false">
                      <span class="starFill" >*</span>
                      <el-form-item label="性别" class="form-item">
                            <el-radio v-model="formInline.MerchantDetail.PersonSex" label="M"  disabled>男</el-radio>
                            <el-radio v-model="formInline.MerchantDetail.PersonSex" label="F" disabled>女</el-radio>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder"  v-show="BussAuthNumShow == false">
                      <!-- <span class="starFill" >*</span> -->
                      <el-form-item label="职业" class="form-item">
                            <el-input v-model="formInline.MerchantDetail.PersonProfession" placeholder="请输入您的职业"  disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder"  v-show="BussAuthNumShow == false">
                      <span class="starFill" >*</span>
                      <el-form-item label="身份证有效期限" class="form-item">
                                <el-date-picker
                                  v-model="formInline.MerchantDetail.PersonCertVld"
                                  type="date"
                                  placeholder="请选择自然人身份证有效期限" disabled>
                                </el-date-picker>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="商户经营类型" class="form-item">
                        <el-select v-model="formInline.DealType" placeholder="请选择 商户经营类型" disabled>
                          <el-option v-for="item in storeBosstypelist" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="经营类目" class="form-item">
                        <el-select v-model="formInline.Mcc" placeholder="请选择 经营类目" disabled>
                          <el-option v-for="item in mccList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="当天到账" class="form-item">
                            <el-radio v-model="formInline.SupportPrepayment" label="Y"   disabled>支持</el-radio>
                            <el-radio v-model="formInline.SupportPrepayment" label="N"  disabled>不支持</el-radio>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="结算方式" class="form-item">
                        <el-select v-model="formInline.SettleMode" placeholder="请选择 结算方式"   disabled>
                          <el-option v-for="item in BalanceAccountWayList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="交易类型" class="form-item">
                        <el-checkbox-group v-model="aTradeTypeList" disabled>
                          <el-checkbox label="01">正扫交易</el-checkbox>
                          <el-checkbox label="02">反扫交易</el-checkbox>
                          <el-checkbox label="06">退款交易</el-checkbox>
                          <el-checkbox label="08">动态订单扫码</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="支付渠道" class="form-item">
                        <el-checkbox-group v-model="aPayChannelList" disabled>
                          <el-checkbox label="01" >支付宝</el-checkbox>
                          <el-checkbox label="02" >微信支付</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="禁用支付方式" class="form-item">
                        <el-checkbox-group v-model="aDeniedPayToolList" disabled>
                          <el-checkbox label="02" >信用卡</el-checkbox>
                          <el-checkbox label="03" >花呗（仅支付宝）</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="花呗分期" class="form-item" >
                            <el-radio v-model="formInline.SupportStage" label="Y" disabled>支持</el-radio>
                            <el-radio v-model="formInline.SupportStage" label="N" disabled>不支持</el-radio>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="微信公众号类型" class="form-item">
                        <el-select class="bigerInput"  v-model="formInline.partner_type" placeholder="请选择 微信公众号类型"  disabled>
                          <el-option v-for="item in partnerTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "SubscribeAppIdShow == true">
                      <el-form-item label="公众号APPID" class="form-item" disabled>
                        <el-input class="bigerInput" v-model="formInline.MerchantDetail.SubscribeAppId" placeholder="请输入需关注的公众号对应的APPID"></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="支付宝费率版本" class="form-item">
                        <el-select  v-model="formInline.rate_version" placeholder="请选择 支付宝费率版本" disabled>
                          <el-option v-for="item in rateVersionList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="联系人手机号" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.ContactMobile" placeholder="请输入您的联系人手机号" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="联系人姓名" class="form-item" >
                        <el-input v-model="formInline.MerchantDetail.ContactName" placeholder="请输入您的联系人姓名" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="商户地址" class="form-item">
                        <!-- <el-cascader :options="options" @change="cityChange" :props='props' expand-trigger="hover"  v-model="contactAdress"></el-cascader> -->
                        <el-cascader :options="options" class="bigerInput"   :props='props' expand-trigger="hover" v-model="contactAdress" disabled></el-cascader>
                        <el-input class="small-input" v-model="formInline.MerchantDetail.Address" placeholder="请输入您的详细地址" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="商户客服电话" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.ServicePhoneNo" placeholder="请输入商户客服电话" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="电子邮箱" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.Email" placeholder="请输入电子邮箱" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "LegalPersonShow == true">
                      <el-form-item label="企业法人名称" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.LegalPerson" placeholder="请输入企业法人名称" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="负责人手机号" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.PrincipalMobile" placeholder="请输入负责人手机号" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="负责人证件类型" class="form-item">
                        <el-select  v-model="formInline.MerchantDetail.PrincipalCertType" placeholder="请选择 负责人证件类型" disabled>
                          <el-option v-for="item in principalCertTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="负责人证件号码" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.PrincipalCertNo" placeholder="请输入负责人证件号码" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="负责人名称" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.PrincipalPerson" placeholder="请输入负责人名称" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "BussAuthNumShow == true">
                        <span class="starFill" >*</span>
                        <el-form-item label="身份证件有效期" class="form-item" >
                          <el-date-picker
                          v-model="formInline.MerchantDetail.PrincipalCertVld"
                          type="date"
                          class="bigerInpur"
                          placeholder="请选择负责人身份证有效期" disabled>
                        </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "BussAuthNumShow == true">
                      <span class="starFill" >*</span>
                      <el-form-item label="控股股东身份证号" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.ShareholderCertNo" placeholder="请输入控股股东身份证号" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "BussAuthNumShow == true">
                      <span class="starFill" >*</span>
                      <el-form-item label="控股股东姓名" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.ShareholderName" placeholder="请输入控股股东/实际控制人姓名" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "BussAuthNumShow == true">
                      <span class="starFill" >*</span>
                      <el-form-item label="身份证件有效期" class="form-item" >
                        <el-date-picker
                        v-model="formInline.MerchantDetail.ShareholderCertVld"
                        type="date"
                        class="bigerInpur"
                        placeholder="请选择控股股东身份证有效期" disabled>
                      </el-date-picker>
                      </el-form-item>
                    </div>
                    <!-- <div class="formLineBorder">
                      <el-form-item label="" class="form-item">
                        <el-button class="saveBtn" type="primary" @click="modifyInternetBank" >保存修改</el-button>
                      </el-form-item>
                    </div> -->
            </el-tab-pane>
            <!-- 其他信息 -->
            <el-tab-pane label="其他信息" name="permissions">
                <!-- <el-row class="rows">
                        <el-col :span="6" class="mb20">
                            <div class="images">
                                <img :src="showImg + img1" class="imgshow" v-if="img1 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img1 == ''">
                                <p v-if="img1 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img1')" >
                            </div>
                            <p class="text-center text-contain" style="width:122px">负责人身份证(正面)</p>
                        </el-col>
                        <el-col :span="6" class="mb20">
                            <div class="images">
                                <img :src="showImg + img2" class="imgshow" v-if="img2 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img2 == ''">
                                <p v-if="img2 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img2')" >
                            </div>
                            <p class="text-center text-contain" style="width:122px">负责人身份证(反面)</p>
                        </el-col>
                        <el-col :span="6" v-show = "BussAuthNumShow == true" class="mb20">
                            <div class="images">
                                <img :src="showImg + img3" class="imgshow" v-if="img3 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img3 == ''">
                                <p v-if="img3 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img3')" >
                            </div>
                            <p class="text-center text-contain" style="width:122px">营业执照图片</p>
                        </el-col>
                        <el-col :span="6" class="mb20" v-show = "BussAuthNumShow == true">
                            <div class="images">
                                <img :src="showImg + img4" class="imgshow" v-if="img4 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img4 == ''">
                                <p v-if="img4 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img4')" >
                            </div>
                            <p class="text-center text-contain" style="width:122px">组织机构代码证图片</p>
                        </el-col>
                        <el-col :span="6" v-show = "BussAuthNumShow == true" class="mb20">
                            <div class="images">
                                <img :src="showImg + img5" class="imgshow" v-if="img5 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img5 == ''">
                                <p v-if="img5 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img5')" >
                            </div>
                            <p class="text-center text-contain" style="width:122px">开户许可证照片</p>
                        </el-col>
                        <el-col :span="6" class="mb20">
                            <div class="images">
                                <img :src="showImg + img6" class="imgshow" v-if="img6 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img6 == ''">
                                <p v-if="img6 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img6')" >
                            </div>
                            <p class="text-center text-contain" style="width:122px">门头照</p>
                        </el-col>
                        <el-col :span="6" class="mb20">
                            <div class="images">
                                <img :src="showImg + img7" class="imgshow" v-if="img7 != ''"/>
                                <img src="./../../public/img/add.png" class="addimg" v-if="img7 == ''">
                                <p v-if="img7 == ''">添加证照</p>
                                <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img7')" >
                            </div>
                            <p class="text-center text-contain" style="width:122px">其他图片</p>
                        </el-col>
                        <el-col :span="6" class="mb20" >
                          <div class="images">
                              <img :src="showImg + img8" class="imgshow" v-if="img8 != ''"/>
                              <img src="./../../public/img/add.png" class="addimg" v-if="img8 == ''">
                              <p v-if="img8 == ''">添加证照</p>
                              <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img8','08')" >
                          </div>
                        <p class="text-center text-contain" style="width:122px">收银台照片</p>
                      </el-col>
                      <el-col :span="6" class="mb20" v-show="BussAuthNumShow == true">
                          <div class="images">
                              <img :src="showImg + img9" class="imgshow" v-if="img9 != ''"/>
                              <img src="./../../public/img/add.png" class="addimg" v-if="img9 == ''">
                              <p v-if="img9 == ''">添加证照</p>
                              <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img9','09')" >
                          </div>
                          <p class="text-center text-contain" style="width:122px">门店内景照片</p>
                      </el-col>
                      <el-col :span="6" class="mb20" >
                          <div class="images">
                              <img :src="showImg + img11" class="imgshow" v-if="img11 != ''"/>
                              <img src="./../../public/img/add.png" class="addimg" v-if="img11 == ''">
                              <p v-if="img11 == ''">添加证照</p>
                              <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img11','11')" >
                          </div>
                          <p class="text-center text-contain" style="width:122px">手持身份证照片</p>
                      </el-col>
                      <el-col :span="6" class="mb20" v-show="BussAuthNumShow == false">
                          <div class="images">
                              <img :src="showImg + img12" class="imgshow" v-if="img12 != ''"/>
                              <img src="./../../public/img/add.png" class="addimg" v-if="img12 == ''">
                              <p v-if="img12 == ''">添加证照</p>
                              <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img12','12')" >
                          </div>
                          <p class="text-center text-contain" style="width:122px">租赁协议照片</p>
                      </el-col>
                    </el-row> -->
                    <div class="formLineBorder" v-show = "BussAuthNumShow == true">
                      <el-form-item label="工商注册号" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.BussAuthNum" placeholder="请输入营业执照工商注册号" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "BussAuthNumShow == true">
                      <!-- <span class="starFill" >*</span> -->
                      <el-form-item label="税务登记证号码" class="form-item">
                        <el-input v-model="formInline.MerchantDetail.TaxNum" placeholder="请输入税务登记证号码" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show = "BussAuthNumShow == true">
                      <!-- <span class="starFill" >*</span> -->
                      <el-form-item label="营业执照有效期" class="form-item" >
                        <el-date-picker
                        v-model="formInline.MerchantDetail.BussAuthVld"
                        type="date"
                        class="bigerInpur"
                        placeholder="请选择控股股东身份证有效期" disabled>
                      </el-date-picker>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" >
                      <el-form-item label="渠道类型" class="form-item">
                          <el-checkbox-group v-model="aChannelType" :min="1"   disabled>
                            <el-checkbox label="01">支付宝</el-checkbox>
                            <el-checkbox label="02">微信支付</el-checkbox>
                          </el-checkbox-group>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="alipayFee == true">
                      <el-form-item label="支付宝费用类型" class="form-item">
                        <el-select  v-model="formInline.FeeParamList[0].FeeType" placeholder="请选择 支付宝费用类型" disabled>
                          <el-option v-for="item in feeTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="alipayFee == true">
                      <el-form-item label="支付宝费率" class="form-item">
                        <span>千分之</span><el-input class="xsInput" v-model="FeeValueAlipay" placeholder="请输入支付宝费率" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="weixinFee == true">
                      <el-form-item label="微信费用类型" class="form-item">
                        <el-select  v-model="formInline.FeeParamList[1].FeeType" placeholder="请选择微信费用类型" disabled>
                          <el-option v-for="item in feeTypeList"   :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="weixinFee == true">
                      <el-form-item label="微信费率" class="form-item">
                        <span>千分之</span><el-input class="xsInput" v-model="FeeValueWeixin" placeholder="请输入微信费率" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="bankCardShow == true">
                      <el-form-item label="银行卡号" class="form-item">
                        <el-input v-model="formInline.BankCardParam.BankCardNo" placeholder="请输入银行卡号" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder"  v-show = "bankCardShow == true">
                      <el-form-item label="银行账户户名" class="form-item">
                        <el-input v-model="formInline.BankCardParam.BankCertName" placeholder="请输入银行账户户名" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder"   v-show = "bankCardShow == true">
                      <el-form-item label="账户类型" class="form-item">
                        <el-select  v-model="formInline.BankCardParam.AccountType" placeholder="请选择账户类型" disabled>
                          <el-option v-for="item in accountTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <!-- <div class="formLineBorder" v-show="LegalPersonShow == true"> -->
                    <div class="formLineBorder" v-show = "bankCardShow == true">
                      <el-form-item label="开户支行名称" class="form-item">
                        <el-autocomplete class="bigerInput"   placeholder="请输入内容" v-model="state4"   disabled @select="handleSelect"></el-autocomplete>
                        <!-- <el-input v-model="formInline.BankCardParam.ContactLine" placeholder="请输入支行名称"></el-input> -->
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="cardType == true && bankCardShow == true">
                      <el-form-item label="持卡人证件类型" class="form-item">
                        <el-select  v-model="formInline.BankCardParam.CertType" placeholder="请选择 持卡人证件类型" disabled>
                          <el-option v-for="item in principalCertTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="cardType == true && bankCardShow == true">
                      <el-form-item label="持卡人证件号码" class="form-item">
                        <el-input v-model="formInline.BankCardParam.CertNo" placeholder="请输入持卡人证件号码" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="cardType == true && bankCardShow == true">
                      <el-form-item label="持卡人地址" class="form-item">
                        <el-input class="bigerInput" v-model="formInline.BankCardParam.CardHolderAddress" placeholder="请输入持卡人证件号码" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder" v-show="bankCardContainShow == true">
                      <el-form-item label="开户支行所在" class="form-item">
                        <el-cascader :options="options" class="bigerInput"  :props='props' expand-trigger="hover" v-model="bankPcity" disabled></el-cascader>
                      </el-form-item>
                    </div>
                    <div class="formLineBorder">
                      <el-form-item label="商户推荐方pid" class="form-item" >
                        <el-input v-model="formInline.AlipaySource" placeholder="请输入商户推荐方pid" disabled></el-input>
                      </el-form-item>
                    </div>
                    <!-- <div class="formLineBorder">
                      <el-form-item label="" class="form-item">
                        <el-button class="saveBtn" type="primary" @click="modifyInternetBank" >保存修改</el-button>
                      </el-form-item>
                    </div> -->
            </el-tab-pane>
          </el-tabs>
          </div>
          </el-form>
          </el-card> 
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
// import CityList from './../../api/city';
import cityCode from './../../api/citycode';
export default {
  mounted: function () {
    // 商户入驻结果查询
    this.getResidentInquiry();
    this.getDetailData();
    console.log(this.formInline.BankCardParam.AccountType);
    // 渠道类型默认为01
    this.formInline.FeeParamList[0].ChannelType = '01';
    // 默认不能点击
    this.feeTypeList[0].disabled = true;
    // 判断数组是否包含这个元素
    if (this.aChannelType.indexOf('01') > -1) {
      this.alipayFee = true;
    } else {
      this.alipayFee = false;
    }
    if (this.aChannelType.indexOf('02') > -1) {
      this.weixinFee = true;
    } else {
      this.weixinFee = false;
    }
  },
  data () {
    return {
      // 全局详情是否显示
      showDetail: false,
      state4: '',
      merchantStatus: 'N',
      timeout: null,
      // 当前是第几步
      stepsActive: 1,
      // 结算方式是否可以点击
      selectSettleMode: false,
      // 商户状态是否显示
      merchartStatusShow: true,
      // 银行卡号是否显示
      bankCardShow: true,
      // 发送验证码显示框是否出现
      yanzhengma: false,
      // // 当天结算是否可以点击
      // todayAccount: false,
      // 手机号是否必填
      needFill: false,
      // 获取商户类型列表
      storetypelist: [{
        store_type: '01',
        store_type_desc: '自然人'
      }, {
        store_type: '02',
        store_type_desc: '个体工商户'
      }, {
        store_type: '03',
        store_type_desc: '企业商户'
      }],
      // 获取商户经营类型
      storeBosstypelist: [{
        store_type: '01',
        store_type_desc: '实体特约商户'
      }, {
        store_type: '02',
        store_type_desc: '网络特约商户'
      }, {
        store_type: '03',
        store_type_desc: '实体兼网络特约商户'
      }],
      // 结算方式列表
      BalanceAccountWayList: [{
        store_type: '01',
        store_type_desc: '结算到他行卡',
        disabled: false
      }, {
        store_type: '02',
        store_type_desc: '结算到余利宝',
        disabled: true
      }],
      // 经营类目列表
      mccList: [{
        store_type: '2015050700000000',
        store_type_desc: '美食'
      }, {
        store_type: '2015091000052157',
        store_type_desc: '超市便利店'
      }, {
        store_type: '2015062600004525',
        store_type_desc: '休闲娱乐'
      }, {
        store_type: '2015062600002758',
        store_type_desc: '购物'
      }, {
        store_type: '2016062900190124',
        store_type_desc: '爱车'
      }, {
        store_type: '2015063000020189',
        store_type_desc: '生活服务'
      }, {
        store_type: '2016042200000148',
        store_type_desc: '教育培训'
      }, {
        store_type: '2016062900190296',
        store_type_desc: '医疗健康'
      }, {
        store_type: '2015080600000001',
        store_type_desc: '航旅'
      }, {
        store_type: '2016062900190337',
        store_type_desc: '专业销售/批发'
      }, {
        store_type: '2016062900190371',
        store_type_desc: '政府/社会组织'
      }],
      // 微信公众号类型列表
      partnerTypeList: [{
        store_type: '01',
        store_type_desc: '商户自有公众号。'
      }, {
        store_type: '03',
        store_type_desc: '合作机构对接网商时留存的公众号。'
      }],
      // 支付宝费率列表
      rateVersionList: [{
        store_type: 'RS',
        store_type_desc: '标准费率'
      }, {
        store_type: 'R0',
        store_type_desc: '0费率'
      }, {
        store_type: 'R1',
        store_type_desc: '千一费率'
      }],
      // 负责人证件类型列表
      principalCertTypeList: [{
        store_type: '01',
        store_type_desc: '身份证'
      }],
      // 费用类型列表
      feeTypeList: [{
        store_type: '01',
        store_type_desc: 't0收单手续费',
        disabled: false
      }, {
        store_type: '02',
        store_type_desc: 't1收单手续费',
        disabled: false
      }],
      // 账户类型
      accountTypeList: [{
        store_type: '01',
        store_type_desc: '对私账户',
        disabled: false
      }, {
        store_type: '02',
        store_type_desc: '对公账户',
        disabled: true
      }],
      // 显示图片的地址
      imgUrl: '',
      // 交易类型选中的数组
      aTradeTypeList: [],
      // 支付渠道选中的数组
      aPayChannelList: [],
      // 禁用支付方式
      aDeniedPayToolList: [],
      // 渠道类型数组
      aChannelType: ['01', '02'],
      // 支付宝费率是否显示
      alipayFee: false,
      // 微信费率是否显示
      weixinFee: false,
      // 持卡人证件类型是否显示
      cardType: true,
      // 商户地址
      contactAdress: [],
      // 企业法人是否出现
      LegalPersonShow: false,
      // 营业执照工商注册号
      BussAuthNumShow: false,
      // 微信需关注的公众号是否出现
      SubscribeAppIdShow: false,
      // 开户支行，省，区是否显示
      bankCardContainShow: false,
      // 开户行所在省市
      bankPcity: [],
      // 支付宝费率还未计算的
      FeeValueAlipay: '',
      // 微信费率还未计算的
      FeeValueWeixin: '',
      formInline: {
        // 推荐方pid
        AlipaySource: '',
        // 商户名称
        MerchantName: '',
        // 商家类型
        MerchantType: '',
        // 商户经营类型
        DealType: '',
        // 商户清算资金是否支持
        SupportPrepayment: 'N',
        // 结算方式
        SettleMode: '',
        // 经营类目
        Mcc: '',
        // 交易类型被选中的字符串
        TradeTypeList: [],
        // 支付渠道被选中的字符串
        PayChannelList: '',
        // 禁用支付方式
        DeniedPayToolList: '',
        // 微信公众号类型
        partner_type: '03',
        // 商户详情
        MerchantDetail: {
          // 负责人手机号
          PrincipalMobile: '',
          // 商户简称
          Alias: '',
          // 联系人手机号
          ContactMobile: '',
          // 联系人姓名
          ContactName: '',
          // 商户地址
          Province: '',
          City: '',
          District: '',
          Address: '',
          // 商户客服电话
          ServicePhoneNo: '',
          // 负责人证件类型
          PrincipalCertType: '01',
          // 负责人证件号码
          PrincipalCertNo: '',
          // 负责人名称
          PrincipalPerson: '',
          // 身份证正面
          CertPhotoA: '',
          // 身份证反面
          CertPhotoB: '',
          // 营业执照图片
          LicensePhoto: '',
          // 组织机构代码证图片
          PrgPhoto: '',
          // 开户许可证照片
          IndustryLicensePhoto: '',
          // 门头照
          ShopPhoto: '',
          // 其他图片
          OtherPhoto: '',
          // 门店内景图片
          ShopEntrancePhoto: '',
          // 租赁协议图片
          ContractPhoto: '',
          // 收银台照片
          CheckstandPhoto: '',
          // 手持身份证照片
          CertPhotoC: '',
          // 邮箱
          Email: '',
          // 企业法人名称
          LegalPerson: '',
          // 营业执照工商注册号
          BussAuthNum: '',
          // 公众号appid
          SubscribeAppId: '',
          // 性别（自然人商户上送）
          PersonSex: '',
          // 职业（自然人商户上送）
          PersonProfession: '',
          // 身份证有效期限（自然人商户上送）
          PersonCertVld: '',
          // 法定代表人或负责人身份证件有效期（企业/个体工商上送）
          PrincipalCertVld: '',
          // 控股股东或者实际控制人身份证件有效期（企业/个体工商上送）
          ShareholderCertVld: '',
          // 控股股东或者实际控制人身份证件号码（企业/个体工商上送）
          ShareholderCertNo: '',
          // 控股股东或者实际控制人身份证件类型（企业/个体工商上送),
          ShareholderCertType: '01',
          // 控股股东或者实际控制人姓名（企业/个体工商上送)
          ShareholderName: '',
          // 营业执照有效期
          BussAuthVld: '',
          // 税务登记证号码
          TaxNum: ''
        },
        // 渠道
        FeeParamList: [{
          ChannelType: '',
          FeeType: '',
          FeeValue: ''
        }, {
          ChannelType: '',
          FeeType: '',
          FeeValue: ''
        }],
        // 银行卡信息
        BankCardParam: {
          // 银行卡号
          BankCardNo: '',
          // 银行账户名
          BankCertName: '',
          // 账户类型
          AccountType: '',
          // 持卡人身份类型
          CertType: '01',
          // 持卡人证件号码
          CertNo: '',
          // 持卡人地址
          CardHolderAddress: '',
          // 支行名称或者联行号
          ContactLine: '',
          // 开户支行名称
          BranchName: '',
          // 开户支行所在省
          BranchProvince: '',
          // 开户支行所在市
          BranchCity: ''
        },
        // 是否支持花呗分期
        SupportStage: 'N',
        // 支付宝费率
        rate_version: 'RS'
        // // 省份
        // province: '',
        // // 城市
        // city: '',
        // // 区
        // district: ''
      },
      baseUrl: api.baseUrl + api.upimg,
      imageUrl: '',
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      showImg: api.baseUrl + api.showImg,
      // token值
      token: localStorage.getItem('token'),
      // 点击获取图片的字的显示
      showImgText: true,
      options: cityCode.cityCode,
      props: {
        value: 'code',
        label: 'value',
        children: 'children'
      }
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 刷新同步信息
    updateBtn () {
      let that = this;
      // 商户信息查询接口
      http.get(api.merchantInfoQuery, {
        MerchantId: that.merchantId,
        id: that.$route.query.id ? that.$route.query.id : ''
      }, response => {
        console.log(response);
        if (response.code === '10001') {
          that.$message.success('刷新成功');
          that.getDetailData();
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        // this.$message.error('网络错误，请稍后再试');
      });
    },
    // 刷新同步信息
    updateBtnCommon () {
      let that = this;
      // 商户信息查询接口
      http.get(api.merchantInfoQuery, {
        MerchantId: that.merchantId,
        id: that.$route.query.id ? that.$route.query.id : ''
      }, response => {
        console.log(response);
        if (response.code === '10001') {
          console.log(response.msg);
          that.getDetailData();
          that.getResidentInquiry();
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        // this.$message.error('网络错误，请稍后再试');
      });
    },
    getResidentInquiry () {
      let that = this;
      // 商户入驻结果查询
      http.get(api.shoppinGunitQuery, {
        OrderNo: this.$route.query.order_no ? this.$route.query.order_no : ''
      }, response => {
        console.log(response);
        if (response.code === '10001') {
          // 成功展示状态并且赋值
          if (response.data[0].register_status === '1') {
            // 全局详情显示
            that.showDetail = true;
            that.merchartStatusShow = true;
            that.merchantStatus = response.data[0].is_open;
            that.merchantId = response.data[0].merchant_id;
            console.log(that.merchantId);
            that.formInline.MerchantId = that.merchantId;
            that.formInline.merchant_id = that.merchantId;
          } else if (response.data[0].register_status === '0') {
            this.$alert('人工审核中', '', {
              confirmButtonText: '确定',
              callback: action => {
                // this.$message({
                //   type: 'info',
                //   message: `action: ${action}`
                // });
              }
            });
            that.showDetail = false;
          } else {
            this.$alert('网商银行入驻失败', '', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
            that.showDetail = false;
          }
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        this.$message.error('网络错误，请稍后再试');
      });
    },
    handleSelect (item) {
      console.log(item);
      // if (this.formInline.MerchantType === '03') {
      //   // 获取对应的联行号
      //   this.formInline.BankCardParam.ContactLine = item.inst_out_code;
      //   console.log(this.formInline.BankCardParam.ContactLine);
      // } else {
      //   // 获取对应的开户支行
      //   this.formInline.BankCardParam.BranchName = item.value;
      //   console.log(this.formInline.BankCardParam.BranchName);
      // }
      let that = this;
      that.formInline.BankCardParam.BranchName = item.value;
      that.formInline.BankCardParam.ContactLine = item.inst_out_code;
      that.BranchName = item.value;
      that.ContactLine = item.inst_out_code;
      // if (this.bankCardShow === true) {
      // // 获取对应的开户支行
      //   this.formInline.BankCardParam.ContactLine = '';
      // } else {
      // // 获取对应的联行号
      //   this.formInline.BankCardParam.ContactLine = item.inst_out_code;
      // }
    },
    // 商户类型选择操作
    merchantTypeOption () {
      let that = this;
      // 结算方式为结算到余利宝，银行卡input 框隐藏，否则显示
      if (that.formInline.SettleMode === '02') {
        that.bankCardShow = false;
        that.formInline.BankCardParam.CertType = '';
      } else {
        that.bankCardShow = true;
        that.formInline.BankCardParam.CertType = '01';
      }
      // 如果选自然人或者个体工商户或者结算到余利宝则验证码显示，手机号为必填，否则相反
      if (that.formInline.MerchantType === '01' || that.formInline.MerchantType === '02' || that.formInline.SettleMode === '01') {
        that.needFill = true;
      } else {
        that.needFill = false;
      }
      if (that.formInline.MerchantType === '03') {
        that.todayAccount = true;
        that.formInline.SupportPrepayment = 'N';
      } else {
        that.todayAccount = false;
        that.formInline.SupportPrepayment = 'N';
      }
      if ((that.formInline.MerchantType === '01' && that.bankCardShow === true) || (that.formInline.MerchantType === '02' && that.bankCardShow === true)) {
        // 对私账户可以点击，对公账户不可以点击，默认选中对私账户
        that.accountTypeList[0].disabled = false;
        that.accountTypeList[1].disabled = true;
        that.formInline.BankCardParam.AccountType = '01';
        that.cardType = true;
        that.formInline.BankCardParam.CertType = '01';
        // 开户支行，省和区显示
        that.bankCardContainShow = true;
      } else if (that.bankCardShow === true && that.formInline.MerchantType === '03') {
        // 对私账户不可以点击，对公账户可以点击，默认选中对公账户
        that.accountTypeList[0].disabled = true;
        that.accountTypeList[1].disabled = false;
        that.formInline.BankCardParam.AccountType = '02';
        that.formInline.BankCardParam.CertType = '';
        that.cardType = false;
         // 开户支行，省和区隐藏
        that.bankCardContainShow = false;
      }
      if (that.formInline.MerchantType === '01' || that.formInline.MerchantType === '02') {
        // 企业法人名称填写隐藏
        that.LegalPersonShow = false;
        that.BalanceAccountWayList[1].disabled = false;
      } else {
        // 企业法人名称填写出现
        that.LegalPersonShow = true;
        that.BalanceAccountWayList[1].disabled = true;
      }
      // 如果选择自然人则隐藏营业执照工商注册号,否则显示
      if (that.formInline.MerchantType === '01') {
        that.BussAuthNumShow = false;
      } else {
        that.BussAuthNumShow = true;
      }
    },
    // 获取详情
    getDetailData () {
      let that = this;
      that.loadingAll = true;
      // 获取商户类型列表
      http.get(api.getEnterDetails, {
        token: localStorage.getItem('token'),
        store_code: that.$route.query.store_code ? that.$route.query.store_code : '',
        id: that.$route.query.id ? that.$route.query.id : ''
      }, response => {
        console.log(response);
        that.loadingAll = false;
        if (response.data + '' !== [] + '') {
          that.formInline = response.data[0];
          // 商户类型选择操作
          that.merchantTypeOption();
          // 当天到账默认如果支持支付方式为结算到余利宝
          if (that.formInline.SupportPrepayment === 'Y') {
            // 结算方式为结算到余利宝
            that.formInline.SettleMode = '02';
            // 银行卡隐藏
            that.bankCardShow = false;
            // 费率必填T+0
            that.formInline.FeeParamList[0].FeeType = '01';
            that.formInline.FeeParamList[1].FeeType = '01';
            that.feeTypeList[0].disabled = false;
            that.feeTypeList[1].disabled = true;
            // 清空银行卡身份证类型
            that.formInline.BankCardParam.CertType = '';
            // 结算方式不能点击
            that.selectSettleMode = true;
          } else {
            // 银行卡显示
            that.bankCardShow = true;
            // 恢复默认身份证类型
            that.formInline.BankCardParam.CertType = '01';
            // 费率必填T+1
            that.formInline.FeeParamList[1].FeeType = '02';
            that.formInline.FeeParamList[1].FeeType = '02';
            that.feeTypeList[0].disabled = true;
            that.feeTypeList[1].disabled = false;
            // 结算方式可以点击
            that.selectSettleMode = false;
          }
          // 微信公众号类型
          if (that.formInline.partner_type === '01') {
            that.SubscribeAppIdShow = true;
          } else {
            that.SubscribeAppIdShow = false;
          }
          // 如果为对公账户则
          if (that.formInline.BankCardParam.AccountType === '02') {
            // 清空银行卡账户类型
            that.formInline.BankCardParam.CertType = '';
            // 清空银行卡账户名
            that.formInline.BankCardParam.BranchName = '';
            // 获取正确的联行号
            // that.formInline.BankCardParam.ContactLine = that.ContactLine;
            that.state4 = that.formInline.BankCardParam.ContactLine;
          } else {
            that.formInline.BankCardParam.CertType = '01';
            // 获取银行卡账户名
            that.formInline.BankCardParam.BranchName = that.formInline.BankCardParam.BranchName;
            // 清空的联行号
            that.formInline.BankCardParam.ContactLine = '';
            that.state4 = that.formInline.BankCardParam.BranchName;
          }
          console.log(that.state4);
          // 开户支行所在拼接
          that.bankPcity.push(that.formInline.BankCardParam.BranchProvince, that.formInline.BankCardParam.BranchCity);
          console.log(that.bankPcity);
          // 交易类型字符串转换为数组，逗号隔开
          that.aTradeTypeList = that.formInline.TradeTypeList.split(',');
          // 支付渠道字符串转换为数组，逗号隔开
          that.aPayChannelList = that.formInline.PayChannelList.split(',');
          // 禁用支付方式字符串转换为数组，逗号隔开
          that.aDeniedPayToolList = that.formInline.DeniedPayToolList.split(',');
          // 商户地址拼接
          that.contactAdress.push(that.formInline.MerchantDetail.Province, that.formInline.MerchantDetail.City, that.formInline.MerchantDetail.District);
          // 判断支付宝是否被勾选,如果勾选就显示对应信息
          if (this.formInline.FeeParamList[0].ChannelType === '01' && this.formInline.FeeParamList[1].ChannelType === '02') {
            this.alipayFee = true;
            this.weixinFee = true;
            this.aChannelType = ['01', '02'];
          } else if (this.formInline.FeeParamList[0].ChannelType === '01' && this.formInline.FeeParamList[1].ChannelType === '') {
            this.alipayFee = true;
            this.weixinFee = false;
            this.aChannelType = ['01'];
          } else if (this.formInline.FeeParamList[0].ChannelType === '' && this.formInline.FeeParamList[1].ChannelType === '02') {
            this.alipayFee = false;
            this.weixinFee = true;
            this.aChannelType = ['02'];
          }
          // 如果支付宝费率显示
          if (that.alipayFee === true) {
            // 获取计算好的支付宝费率
            that.FeeValueAlipay = that.formInline.FeeParamList[0].FeeValue * 1000;
          } else {
            that.FeeValueAlipay = '';
          }
          if (that.weixinFee === true) {
            // 获取计算好的微信费率
            that.FeeValueWeixin = that.formInline.FeeParamList[1].FeeValue * 1000;
          } else {
            that.FeeValueWeixin = '';
          }
          if (this.bankCardShow === true) {
          // 获取对应的开户支行
            this.state4 = this.formInline.BankCardParam.BranchName;
            this.formInline.BankCardParam.ContactLine = '';
          } else {
          // 获取对应的联行号
            this.state4 = this.formInline.BankCardParam.ContactLine;
            this.formInline.BankCardParam.BranchName = '';
          }
        }
      }, () => {
        console.log('网络错误');
      });
    },
    back () {
      if (this.stepsActive > 1) {
        this.stepsActive = this.stepsActive - 1;
      };
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  box-sizing: border-box
  background: #fff
  .step
    margin: 55px 0;
    width: 600px;
    display: inline-block
    .step-title
      border-left: 5px solid #36ADCB
      padding-left: 5px
      font-size: 16px
      margin-bottom: 15px;
  .line
    border-top: 1px solid #ABABAB;
  .next-btn
    padding-top: 25px
.formLineBorder
  position: relative
  margin-left:10px
  text-align:center;
  .saveBtn
    margin-left: 120px
  .bigerInput
    width: 310px;
  .xsInput
    width: 60px
    text-align: center
    margin-left: 10px
  .small-input
    width:202px
  .starFill
    position: absolute;
    top: 12px;
    left: -10px;
    color: #f00
    font-size: 14px
  .form-item
    display: block
    text-align: left
    .img-path
      width: 125px
      height: 39px
      position: absolute
      top: 0
      left: 0
      cursor: pointer
    .send-btn
      width:111px
    .show-img
      opacity: 1
    .hide
      opacity: 0
    .btn-no-bg
      background: none
    .passwordInput
      width: 400px
.rows
  width:100%
  margin-bottom: 10px    
  .images
    position:relative
    border: 1px solid #ababab;
    height: 160px;
    width: 120px;
    margin-bottom:15px
    text-align: center;
    .addimg
      margin: 50px auto 15px
      display: inline-block
      width: 30px
      height: 30px
    .imgshow
      position: absolute
      top: 0
      left: 0
      width: 122px
      height: 162px
    .avatar-uploader
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      cursor: pointer
      overflow: hidden
      opacity:0
    .show
      width:120px;
      height:160px;
      background:rgba(0,0,0,.3);
      top:0px;
      position:absolute;
      opacity: 0;
      display: block;
      font-size: 12px;
      transition: 0.3s;
      -webkit-transition: .2s;
      -moz-transition: .2s;
      .look
        color:#fff
        font-size:14px
        text-decoration:underline
        height:135px
        line-height:135px
        cursor:pointer
      .again
        color:#008AFA
        font-size:12px
        text-decoration:underline
        height:25px
        line-height:25px
        background:rgba(255,255,255,.3)
        cursor:pointer          
  .images:hover
    .show
      opacity: 1;
    .text-contain
      width: 122px;
  .mb20
    margin-bottom: 20px
.mt10
  margin-top: 10px
</style>
